<template>
    <div class="managementBox">
		<img class="managementBoxImage" src="../../assets/image/intelligentEquipment/tc3.png" >
		<img class="managementBoxImageBtn" @click="tryEquipment" src="../../assets/image/intelligentEquipment/ljsy2.png" >
		<!-- <div class="header">专业化智慧农业互联网系统</div>
        <div class="center">
            <img src="@/assets/image/intelligentEquipment/kejinongye.png" alt="">
            <div class="text">
                <span>
                    整个系统可根据监测的土壤水分、作物种类的需肥规律，设置周期性
                    水肥计划实施轮灌。施肥机会按照用户设定的配方、灌溉过程参数自
                    动控制灌溉量、吸肥量、肥液浓度、酸碱度等水肥过程的重要参数，
                    实现对灌溉、施肥的定时、定量控制，充分提高水肥利用率，实现节
                    水、节肥，改善土壤环境，提高作物品质的目的。该系统广泛应用于
                    大田、旱田、温室、果园等种植灌溉作业。
                </span>
                <button @click="tryEquipment">立即试用 →</button>
            </div>
        </div>
        <div class="footer">
            <div class="card" v-for="item in cardData" :key="item.id">
                <img :src="item.url" alt="">
                <div>{{item.title}}</div>
                <span>{{item.content}}</span>
            </div>
        </div> -->
	</div>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
                companyId: this.$store.state.company.companyId,
				cardData:[
                    {
                        url:require("@/assets/image/intelligentEquipment/jiekou.png"),
                        title:'接入与建模服务',
                        content:'丰富的设备模型，全新的 MQTT协议，为您打造一站式设备接入体验。'
                    },
                     {
                        url:require("@/assets/image/intelligentEquipment/menkan.png"),
                        title:'低门槛',
                        content:'无需编程、无需二次开发、无需架设服务器。通过EMCP云平台只需10分钟即可将设备连接到互联网上。'
                    },
                     {
                        url:require("@/assets/image/intelligentEquipment/wending.png"),
                        title:'稳定性',
                        content:'稳定的硬件设计、分布式服务器，优化的数据库结构，保证你的设备24小时实时在线。'
                    },
                     {
                        url:require("@/assets/image/intelligentEquipment/xingjiabi.png"),
                        title:'性价比高',
                        content:'无需负担品贵的硬件（服务器）和软件（定制软件或使用组态软件）成本，无需请专业的技术人员进行开发和系统维护。'
                    },
                ]
			}
		},
        mounted(){
        },
        methods:{
            tryEquipment(){
                if(this.companyId){
                    this.$request.postForm(this.$api.saveProbation, {
					companyId: this.companyId,
                    userId: this.$store.state.user.userInfo.id,
					sysId: this.$route.query.id,
				    }).then(res => {
				    	if (res.code == 200) {
                            let probation = JSON.parse(sessionStorage.getItem('probation')) 
                            probation.forEach(item =>{
                                if(item.probationUrl == '/IntelligentEquipmenTry'){
                                    item.probation = '1'
                                }
                            })
                            sessionStorage.setItem("probation",JSON.stringify(probation))
				    		this.$router.push({
				            	path:'/IntelligentEquipment/working',
				            })
                            this.supplierAuthority()
				        }
				    })
                }else{
                    this.$message.error('请先创建或加入公司！')
                }
            },
            supplierAuthority(){
                this.$request.postForm(this.$api.supplierAuthority, {
					companyId: this.companyId,
				}).then(res => {

				})
            },
        }
	}
</script>

<style scoped="scoped" lang="scss">
	.managementBox{
		width: 100%;
		height: calc(100% - 62px);
		position: fixed;
		background: #0066CC;
		left: 0;
		top: 62px;
		z-index: 1;
		.managementBoxImage{
			width: 100%;
			height: 100%;
			min-width: 1200px;
			object-fit: cover;
		}
		.managementBoxImageBtn{
			width: 195px;
			height: 55px;
			position: absolute;
			left: 48%;
			top: 30%;
			transform: translateX(-50%);
			cursor: pointer;
		}
	}
	// .managementBox{
	// 	min-height: 690px;
 //        width: 100%;
	// 	overflow: hidden;
 //        background-image: url('~@/assets/image/intelligentEquipment/background.png');
 //        background-size:contain ;
 //        background-repeat:round;
	// }
 //    .header{
 //        height: 38px;
 //        font-size: 40px;
 //        font-family: STHupo;
 //        font-weight: 400;
 //        color: #FFFFFF;
 //        line-height: 30px;
 //        text-shadow: 3px 3px 3px rgba(21, 144, 70, 0.56);
 //        text-align: center;
 //        margin-top: 70px;
 //        margin-bottom: 50px;
 //    }
 //    .center{
 //        display: flex;
 //        justify-content:center;
 //        img{
 //            width: 340px;
 //            height: 290px;
 //        }
 //        .text{
 //            display: flex;
 //            flex-direction: column;
 //            justify-content:space-around;
 //            font-family: Microsoft YaHei;
 //            margin-left: 40px;
 //            span{
 //                width: 481px;
 //                height: 137px;
 //                font-size: 16px;
 //                font-weight: 400;
 //                color: #FFFFFF;
 //                line-height: 24px;
 //            }
 //            button{
 //                width: 190px;
 //                height: 50px;
 //                background: #EBC244;
 //                border-radius: 25px;
 //                border-color: rgb(255, 255, 255);
 //                font-size: 20px;
 //                font-weight: bold;
 //                color: #FFFFFF;
 //                line-height: 30px;
 //                margin-top: -40px;
 //            }
 //        }
 //    }
 //    .footer{
 //        display: flex;
 //        flex-direction: row;
 //        justify-content: center;
 //        margin: 20px 0 30px 0;
 //        .card{
 //            display: flex;
 //            flex-direction: column;
 //            margin: 0 20px;
 //            padding: 30px 20px;
 //            width: 220px;
 //            height: 300px;
 //            background: #FFFFFF;
 //            box-shadow: 0px 0px 30px 0px rgba(17, 26, 67, 0.1);
 //            border-radius: 20px;
 //            line-height: 25px;
 //            font-weight: 400;
 //            text-align: center;
 //            font-family: Microsoft YaHei;
 //            img{
 //                margin: 0 auto;
 //                width: 40px;
 //                height: 40px;
 //                margin-bottom: 28px;
 //            }
 //            div{
 //                font-size: 20px;
 //                color: #23B14D;
 //                margin-bottom: 20px;
 //            }
 //            span{
 //                font-size: 16px;
 //                color: #333333;
 //            }
 //        }
 //    }
	
</style>